<template>
  <el-table ref="table" :data="columnData" row-key="prop" style="width: 100%" border>
    <el-table-column prop="" label="排序" width="60">
      <el-tag disable-transitions class="move" style="cursor: move"
        ><el-icon style="cursor: move"><el-icon-d-caret /></el-icon
      ></el-tag>
    </el-table-column>
    <el-table-column prop="label" label="列名">
      <template #default="scope">
        <el-tag round disable-transitions :effect="scope.row.hide ? 'light' : 'dark'" :type="scope.row.hide ? 'info' : ''">{{ scope.row.label }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="hide" label="显示" width="60">
      <template #default="scope">
        <el-switch v-model="scope.row.hide" size="small" :active-value="false" :inactive-value="true" />
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import Sortable from 'sortablejs'

export default {
  emits: ['success'],
  props: {
    column: { type: Array, default: () => [] },
  },
  data() {
    return {
      columnData: this.column,
    }
  },
  mounted() {
    this.rowDrop()
  },
  methods: {
    rowDrop() {
      const _this = this
      const tbody = this.$refs.table.$el.querySelector('.el-table__body-wrapper tbody')
      Sortable.create(tbody, {
        handle: '.move',
        animation: 200,
        ghostClass: 'ghost',
        onEnd({ newIndex, oldIndex }) {
          const tableData = _this.columnData
          const currRow = tableData.splice(oldIndex, 1)[0]
          tableData.splice(newIndex, 0, currRow)
        },
      })
    },
  },
}
</script>
